<template>
    <div class='wrap'>
        <div class="competition-main">
          <div class="lv" :class="lvClass"></div>
          <div class="contain">
            <my-question v-if='isReady' :gameType=2 :problemList='problems' @commitQuestion='finishQuestion'></my-question>
          </div>
        </div>
        <div class="blueBg"></div>
    </div>
</template>

<script>
import Question from '../components/Question'
export default {
  data () {
    return {
      nowLevel: 1,
      isReady: false,
      lvClass: 'lv1'
    }
  },
  components: {
    myQuestion: Question
  },
  beforeCreate () {
    this.GLOBAL.validate()
  },
  created () {
    this.GLOBAL.player.level = Number(this.$route.params.lv)
    this.GLOBAL.player.misCount = 0
    this.nowLevel = this.GLOBAL.player.level
    this.lvClass = 'lv' + this.nowLevel
    this.initData()
  },
  mounted: function () {
    document.getElementsByTagName('body')[0].className = 'green'
    // 添加返回事件监听
    let that = this
    history.pushState(null, null, '')
    window.onpopstate = function (event) {
      that.$router.push({path: '/mode'})
    }
  },
  beforeDestroy: function () {
    document.body.removeAttribute('class', 'green')
  },
  methods: {
    finishQuestion () {
      let misCount = this.GLOBAL.player.missCount
      let lv = this.GLOBAL.player.level
      if (misCount === 0) {
        if (lv < 5) {
          this.GLOBAL.player.level += 1
          return this.$router.push({path: '/levelup/'})
        } else {
          return this.$router.push({path: '/win/'})
        }
      } else {
        if (lv > 2) {
          return this.$router.push({path: '/lost'})
        }
        return this.$router.push({path: '/lost'})
      }
    },
    initData () {
      this.$http.getQuestionsByRandom(this.nowLevel).then(
        (result) => {
          this.problems = result.data
          this.isReady = true
        }
      ).catch((error) => {
        console.error(error)
      })
    }
  }
}
</script>

<style>
.green {
  background-color: rgb(64, 143, 71)
}
.blueBg {
  background-color: rgb(54, 174, 255)
}
.wrap {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}
.competition-main {
  display: flex;
  flex-direction: column;
  background:url('../assets/question/bg_29.png') no-repeat;
  background-size:20.5rem;
  min-height: 36rem;
  width: 20.5rem;
  align-items: center;
}
.contain {
  width:86%;
}
.lv {
  width: 7rem;
  height: 5rem;
}
.lv1 {
  background:url('../assets/competition/lv1.png') no-repeat;
  background-size:7rem;
}
.lv2 {
  background:url('../assets/competition/lv2.png') no-repeat;
  background-size:7rem;
}
.lv3 {
  background:url('../assets/competition/lv3.png') no-repeat;
  background-size:7rem;
}
.lv4 {
  background:url('../assets/competition/lv4.png') no-repeat;
  background-size:7rem;
}
.lv5 {
  background:url('../assets/competition/lv5.png') no-repeat;
  background-size:7rem;
}
.blueBg {
  width: 100%;
  position: absolute;
  height: 7.2rem;
  z-index: -1;
  left: 0px;
}
</style>
